<template>
<!--   <CaseMgmt :show-save-btn="false" :edit-mode="false"></CaseMgmt>-->
  <div>
    <el-row :gutter="12">
      <el-col style="width: 50%">
        <el-card>
          <div slot="header" style="width: 50%">
            <span style="font-weight:bold">版本比较</span>
          </div>
          <el-row :gutter="12">
            <el-col  :span="12">
              <el-card>
                {{ '备份ID：' + $route.params.backupId1}} <br />
                {{'创建人：' + backupInfo[0].user}} <br />
                {{'备份时间：' + backupInfo[0].time}}
              </el-card>
            </el-col>
            <el-col  :span="12">
              <el-card>
                <span></span>
                {{ '备份ID：' + $route.params.backupId2}} <br />
                {{'创建人：' + backupInfo[1].user}} <br />
                {{'备份时间：' + backupInfo[1].time}}
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col style="width: 50%">
        <el-card >
          <div slot="header">
            <span style="font-weight:bold">颜色标识</span>
          </div>
          <el-card>
            <el-tag color="#409eff" style="color: black">内容变更</el-tag>
            <el-tag color="#f56c6c" style="color: black">该节点被删除</el-tag>
            <el-tag color="#67c23a" style="color: black">该节点被添加</el-tag>
          </el-card>
        </el-card>
      </el-col>
    </el-row>
    <VueTestcaseMinderEditor
      ref="minderEditor"
      :initJson="initJson"
      :allow-edit-priority="editMode"
      :allow-edit-label="editMode"
      :allow-edit-result="resultMode"
      :showSaveBtn="showSaveBtn"
      :allow-edit-node="editMode" >
    </VueTestcaseMinderEditor>
  </div>
</template>

<script>
// import 'vue-minder-testcase/lib/VueTestcaseMinderEditor.css'
import request from '@/utils/axios'
import {dateFormatYmdHMS} from "@/views/casepage/DateFormat";
export default {
  name: "CaseBackupContrast.vue",
  data() {
    return {
      initJson: {
        root: {
          data: {
            text: '主题',
            id: '0'
          },
          children: [
            { data: { text: '分支', id: '1', resource: ['自定义标签'] }}
          ]
        }
      },
      resultMode: false,
      editMode: false,
      showSaveBtn: false,
      backupInfo: [{'user': '', 'time': ''}, {'user': '', 'time': ''}]
    }
  },
  methods: {
    getCaseBackupDiff: function () {
      const url = '/backup/getCaseDiff'
      request(url, {
        method: 'GET',
        params: {
          backupId1: this.$route.params.backupId1,
          backupId2: this.$route.params.backupId2 }
      }).then(res => {
        if (res.code === 200) {
          this.initJson = res.data.content
          this.backupInfo = res.data.backupinfo.map(item => {
            item.time = dateFormatYmdHMS(item.time)
            return item
          })
          console.log(res.data)
          console.log(this.backupInfo)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          });
        }
      })
    }
  },
  created () {
    this.getCaseBackupDiff()
  }
}
</script>

<style scoped>

</style>
